<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生信息</title>
    <!--1.先引入vue.js-->
    <script src="../js/vue.js"></script>
    <!--2.引入elementui的js-->
    <script src="element-ui/lib/index.js"></script>
    <!--3.引入elemetentui样式的css-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
  <div id="app">
      <!--搜索框-->
      <el-form :inline="true" :model="formStu" class="demo-form-inline">
          <el-form-item label="姓名">
              <el-input v-model="formStu.username" placeholder="请输入要搜索的姓名..."></el-input>
          </el-form-item>
          <el-form-item label="年级">
              <el-select v-model="formStu.grade" placeholder="请选择所在年级">
                  <el-option label="一年级" value="1"></el-option>
                  <el-option label="二年级" value="2"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
      </el-form>

      <!--新增和批量删除按钮-->
      <el-row>
          <el-button type="danger" icon="el-icon-delete" @click="batchDelete()">批量删除</el-button>
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addInfo()">新增数据</el-button>
      </el-row>

      <!--对话框-->
      <el-dialog center :title="title" :visible.sync="dialogFormVisible">
          <el-form :model="student">
              <el-form-item label="姓名" :label-width="formLabelWidth">
                  <el-input v-model="student.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码" :label-width="formLabelWidth">
                  <el-input v-model="student.password" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="年龄" :label-width="formLabelWidth">
                  <el-input v-model="student.age" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="电话" :label-width="formLabelWidth">
                  <el-input v-model="student.phone" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="状态" :label-width="formLabelWidth">
                  <el-radio-group v-model="student.status">
                      <el-radio  label="1">启用</el-radio>
                      <el-radio  label="0">禁用</el-radio>
                  </el-radio-group>
              </el-form-item>
             <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
                  <el-select v-model="form.region" placeholder="请选择活动区域">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
              </el-form-item>-->
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="out()">取 消</el-button>
              <el-button type="primary" @click="okDo()">确 定</el-button>
          </div>
      </el-dialog>
      <!--数据展示的表格-->
      <el-table
              height="450px"
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName"
              @selection-change="handleSelectionChange"><!--选中状态发生改变-->
          <!--多选框-->
          <el-table-column
                  type="selection"
                  width="55" align="center">
          </el-table-column>
          <el-table-column
                  prop="id"
                  label="编号"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="username"
                  label="姓名"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="password"
                  label="密码"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="age"
                  label="年龄"
                  idth="100">
          </el-table-column>
          <el-table-column
                  prop="phone"
                  label="电话">
          </el-table-column>
          <el-table-column
                  prop="status"
                  label="状态">
          </el-table-column>
        <!--操作-->
          <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                  <el-button
                          size="mini"
                          @click="handleEdit(scope.row)">编辑</el-button>
                  <el-button
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>

      <!--分页组件-->
      <div class="block">
          <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 15, 20, 25]"
                  :page-size="pageSize"
                  layout="sizes, prev, pager, next, jumper,->,total"
                  :total="total">
          </el-pagination>
      </div>

  </div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                //搜索框数据
                formStu: {
                    user: '',
                    grade: ''
                },
                // 表格数据
                tableData: [{
                    id: '001',
                    username: '王小虎',
                    password: '123456',
                    age:18,
                    phone:'188802266993',
                    status:'1'
                },{
                    id: '002',
                    username: '王小虎',
                    password: '123456',
                    age:18,
                    phone:'188802266993',
                    status:'1'
                },
                    {
                        id: '003',
                        username: '王小虎',
                        password: '123456',
                        age:18,
                        phone:'188802266993',
                        status:'1'
                    }],
                //多选的存储对象的数组
                multipleSelection: [],
                currentPage: 1,//当前页面
                pageSize:5, //每页显示的条数
                total:100, //数据的总条数
                dialogFormVisible:false, //对话框显示控制 false为隐藏
                //弹出框数据
                student: {},
                //弹出框宽度
                formLabelWidth: '120px',
                //弹出框头部文字
                title:'',
                toDo:'' //标识是新增还是修改操作
            }
        },
        methods:{
            //搜索框调用的函数
            onSubmit() {
                console.log('submit!');
            },
            //批量删除按钮点击的方法
            batchDelete(){
                console.log('批量删除!');
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {


                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //新增数据
            addInfo(){
                console.log('新增信息!');
                this.title='新增数据';
                //标识新增
                this.toDo = 'add';
                this.student = {};
                //弹出框
                this.dialogFormVisible  = true;
            },
            //编辑
            handleEdit(row) {
                this.title='编辑数据';
                //标识修改
                this.toDo = "modify";

                console.log(row);
                //弹出框要显示相关的数据  可以发起请求去查询 也可以将原来这一行的值赋值给弹出框
                this.student = row;

                this.dialogFormVisible  = true;

            },
            //删除
            handleDelete(row) {
                console.log(row.id);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    //发送请求进行删除 成功再提示
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });

                }).catch(() => {

                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });

                });
            },
            //批量选中表格前方复选框
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //当显示条数发生改变执行的函数
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
            },
            //当当前页数发生改变执行的函数
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage =  val;
            },
            //退出弹出框
            out(){
                this.dialogFormVisible = false;
                this.student = {};
                this.$message({
                    type: 'info',
                    message: '取消操作'
                });
            },
            //点击弹出框确定
            okDo(){
                //判断点击的是新增的确定还是修改的确定
                var toDo = this.toDo;
                if(toDo == 'add'){
                    //新增
                    alert("新增");
                    this.dialogFormVisible = false;
                }else if (toDo == 'modify'){
                    //编辑
                    alert("编辑");
                    this.dialogFormVisible = false;
                }

            },

            //表格样式的函数
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            }
        }
    });
</script>